<template>
	<view class="content">
		<view class="date_option">
			<view class="date_left">
			<!-- 	<u-input placeholder="请选择日期" prefixIcon="calendar" border="surround" v-model=""
					@focus="open()">
				</u-input> -->
				<view class="date_css" @click="open()">
					<u-icon name="calendar" class="icon_css"></u-icon>
					{{screenDate}}
				</view>
			</view>
			<view class="date_right">
				<u-number-box v-model="value" @change="changeNum" :max="number">
					<view slot="minus" class="minus" >
						<u-icon name="arrow-left" size="16"></u-icon>
					</view>
					<text slot="input" style="width: 160rpx;text-align: center;color: #303135;" class="input">
						第 {{value}} 轮</text>
					<view slot="plus" class="plus" >
						<u-icon name="arrow-right" size="16" ></u-icon>
					</view>
				</u-number-box>
			</view>
		</view>
		<view class="patrol_top">
			<view class="" style="display: flex;width: 60%;">
				<image src="../../static/patrol/check.png" mode="" class="patrol_img"></image>
				<view class="patrol_persion">巡检人 {{inspectionPeople?inspectionPeople:"暂无"}}</view>
			</view>
			<view class="patrol_date" v-if="inspectionStart && inspectionEnd">{{inspectionStart}} ~ {{inspectionEnd}}</view>
			<view class="patrol_date" v-else>暂无</view>
		</view>
		<u-divider></u-divider>
		<view class="patrol_info" v-if="equipmentList.length > 0">
			<view v-for="(item,index) in equipmentList" class="equipment">
				<view style="display: flex;">
					<image src="../../static/patrol/equipment.png" mode="" class="patrol_img"></image>
					<view class="patrol_title">{{item.roomName}}</view>
				</view>
				<view class="equipment_item" >
					<view class="equipment_item_name">
							<view style="margin-left: 80rpx;">{{item.equipmentType}} {{item.equipmentNo}}</view>
						<view class="enclosure" @click="fujian(item)">附件</view>
					</view>
					<view class="" style="display: flex;justify-content: space-between; width: 70%;margin-left: 40px;">
						<view class="" v-if="item.temperature">温度 {{item.temperature?item.temperature:"暂无"}}℃</view>
						<view class="" v-if="item.humidity">湿度 {{item.humidity?item.humidity:"暂无"}}%</view>
						<view class="">{{item.runningStatus==1?"运行正常":"运行异常"}}</view>
					</view>
				
				</view>
				<u-divider ></u-divider>
			</view>
		</view>
		<view style="text-align: center;margin-top: 70rpx;" v-else>
			暂无数据
		</view>
		<u-popup :show="urlShow" @close="urlShow = false,urlIndex = 0" @open="openurl" mode="center" :customStyle="styleCss" name="urlcalendar">
			<view style="display: flex;padding: 0 10px;z-index: 9999;">
				<u-icon name="arrow-left" size="36px" @click="reduce(1)" v-if="urlAddress.length > 1"></u-icon>
				<image :src="urlAddress[urlIndex]" style=" width: 65vw; height: 90vh;" mode="aspectFit"></image>
				<u-icon name="arrow-right" size="36px" @click="reduce(2)" v-if="urlAddress.length > 1"></u-icon>
			</view>
		           		
				</u-popup>
		<!-- <view class="fujian" v-if="urlShow">
			<view class="fujian_css">
				<image :src="urlAddress" mode=""></image>
			</view>
		</view> -->
		<uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
			:insert="info.insert" :startDate="info.startDate" :endDate="info.endDate" @confirm="confirm"
			@close="close" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				screenDate: "",
				value: 1,
				info: {
					insert: false
				},
				equipmentList: [],
				inspectionPeople:"",//巡检人
				inspectionStart:"",//巡检开始时间
				inspectionEnd:"",//巡检结束时间
				number:1,
				numberId:"",//轮数id
				roundList:[],//轮数list (用于轮数筛选取轮数id)
				urlAddress:[],
				urlShow:false,
				styleCss:{
					background: "transparent",
				},
				urlIndex:0
			}
		},
		onLoad() {
			this.getDate()
			this.loadData()
		},
		methods: {
			fujian(val){
			   this.urlAddress = val.photo.split(",")
			   this.urlShow = true
			},
			reduce(num){
				if(num == 1){
					this.urlIndex--
					if(this.urlIndex <= 0){
						this.urlIndex = 0
						return
					}
					this.$forceUpdate()
				}else{
					this.urlIndex++
					if(this.urlAddress.length-1 <= this.urlIndex){
						this.urlIndex = this.urlAddress.length-1
						return
					}
					this.$forceUpdate()
				}
			},
			openurl(){
				this.urlShow = true
				// this.$refs.urlcalendar.open()
			},
			changeNum(e){
				this.value = e.value
				this.numberId = this.roundList[e.value - 1].id
				this.loadData()
			},
			getDate(){//查询当前时间
				let date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month < 10) {
					month = "0" + month
				}
				if (day < 10) {
					day = "0" + day
				}
				this.screenDate = year+"-"+month+"-"+day
			},
			loadData() {
				this.$api.request('app.inspectionrounds', 'appRecordRounds',{
					date:this.screenDate
				}).then(res => {
					if(res.data.length >0){
						 for(let i = 0 ;i < res.data.length; i++){
							 if(this.value == res.data[i].rounds){
								 this.inspectionPeople = res.data[i].inspectionPeople
								 this.inspectionStart = res.data[i].inspectionStart.split(" ")[1]
								 this.inspectionEnd = res.data[i].inspectionEnd.split(" ")[1]
								 this.numberId = res.data[i].id   //默认第一轮 ，切换轮数自动获取轮数id
							 }
						 }
						this.number = res.data.length
						// this.numberId = res.data[0].id
						this.roundList = res.data
						this.getNext()
					}else{
						this.inspectionPeople = ""
						this.inspectionStart = ""
						this.inspectionEnd = ""
						this.number = 1
						this.numberId = ""
						this.roundList = []
						this.equipmentList=[]
					}
				})
			},
			getNext(){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
					
				this.$api.request('app.inspection', 'list',{
					roundsId:this.numberId,
					page:1,
					limit:20
				}).then(res => {
					if(res.data.items.length > 0){
						this.equipmentList = res.data.items
						// this.equipmentList.push(res.data.items[0])
					}else{
						this.equipmentList = []
					}
					uni.hideLoading()
				})
			},
			dateChange() {
				this.show = true
			},
			open() {
				this.$refs.calendar.open()
			},
			confirm(e) {
				this.screenDate = e.fulldate
				this.loadData()
			},
			close() {
				console.log('弹窗关闭');
			}
		}
	}
</script>

<style lang='scss' scoped>
	.content {
		padding: 20rpx;
	}

	.date_option {
		display: flex;

		.date_left,
		date_right {
			width: 50%;
		}
		.date_css{
			display: flex;
			border: 1px solid #AFB3BF;
			padding: 10rpx 20rpx;
			border-radius: 8rpx;
		}
		.icon_css{
			margin-right: 10rpx;
		}

		.date_right {
			display: flex;
			margin: 0 auto;
		}
	}

	.patrol_top {
		display: flex;
		line-height: 48rpx;
		margin-top: 40rpx;
		width: 100%;

		.patrol_img {
			width: 50rpx;
			height: 50rpx;
		}

		.patrol_persion {
			font-size: 16px;
			margin-left: 30rpx;
			
		}

		.patrol_date {
			font-size: 28rpx;
			display: flex;
			justify-content: flex-end;
		}
	}

	.patrol_info {
		.patrol_img {
			width: 40rpx;
			height: 40rpx;
		}

		.patrol_title {
			/* margin: -10rpx 0 0 0; */
			margin-left: 30rpx;
		}
		.equipment{
			margin-top:40rpx
		}
		.equipment_item {
			.equipment_item_name {
				display: flex;
				justify-content: space-between;
				margin: 20rpx 0;
				.enclosure{
					font-size: 14px;
					color: #2F53EB;
					font-weight: 600;
				}
			}
		}
	}
	.u-popup__content{
		background-color: transparent;
	}
	
</style>
